<template>
	<view class="zai-box">
		<scroll-view scroll-y class="page">
			<view style="text-align: center;" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image src="/static/icos/default-face.png" mode='aspectFit' class="zai-logo"></image>
				<view class="zai-title">电影预告</view>
			</view>
			<view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">

				<view class="cu-form-group margin-top round shadow-blur">
					<view class="title">账号:</view>
					<input placeholder="请输入账号" name="input" v-model="userName"></input>
				</view>
				<view class="cu-form-group margin-top round">
					<view class="title">密码:</view>
					<input placeholder="请输入密码" name="input" type="password" v-model="password"></input>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-green shadow-blur round lg" :loading="loading" @tap="onLogin">
						{{loading ? "登录中...":"登 录"}}
					</button>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				userName: '',
				password: ''
			};
		},
		methods: {
			onLogin: function() {
				var me = this;
				var serverUrl = me.serverUrl;
				
				if (!this.userName || this.userName.length == 0) {
					uni.showToast({
						title: '请填写用户名~',
						icon: 'none'
					})
					return;
				}
				if (!this.password || this.password.length == 0) {
					uni.showToast({
						title: '请填写密码~',
						icon: 'none'
					})
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password
				}
				
				uni.showLoading({
					mask: true,
					title: '登录中...'
				});
				this.loading = true;
				
				// 登录请求
				uni.request({
					url: serverUrl + '/user/login',
					method: 'POST',
					success: (res) => {
						// 保存用户信息到全局缓存中
						uni.setStorageSync('loginUser', res.data.data);
						// 切换页面跳转，使用tab切换的api
						uni.switchTab({url: '../me/me'});
					},
					complete: () => {
						uni.hideLoading();
						this.loading = false;
					}
				});
				
				// 模拟请求后关闭加载
				setTimeout(function() {
					uni.hideLoading();
					me.loading = false;
					uni.switchTab({url: '../me/me'});
				}, 3000);
			}

		}
	}
</script>

<style>
	.login-paddingtop {
		padding-top: 100upx;
	}

	.zai-box {
		padding: 0 20upx;
		padding-top: 100upx;
		position: relative;
	}

	.zai-logo {
		width: 200upx;
		height: 300upx;
	}

	.zai-title {
		font-size: 48upx;
		color: #000000;
		text-align: center;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}
</style>
